<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 标签式的导航菜单</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   
</head>
<body>
    <h3>标签式的导航菜单</h3>
<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li class="dropdown"> 
        <a class="dropdown-toggle" data-toggle="dropdown"  href="#"> 
            SVN
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li > <a href="#">WSVN</a></li>
            <li><a href="#">iOS</a></li>
            <li><a href="#">ejg</a></li>
            <li class="divider"></li>
            <li><a href="#">Java</a>
            </li>
        </ul>
    </li>
    <li> <a href="#">ios</a></li>
    <li><a href="#">VB.Net</a></li>
    <li><a href="#">Java</a></li>
</ul><br>
<h3>基本的胶囊式导航菜单</h3>
    <ul class="nav nav-pills">
        <li class="active"><a href="#">SVN</a></li>
        <li><a href="">www</a></li>
        <li><a href="">iso</a></li>
        <li><a href="">cng</a></li>
        <li><a href="">ccav</a></li>
    </ul><br>

    <h3>垂直的胶囊式导航菜单</h3>
    <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="#">Homen</a></li>
            <li><a href="">www</a></li>
            <li><a href="">iso</a></li>
            <li><a href="">cng</a></li>
            <li><a href="">ccav</a></li>
        </ul><br>
        <h3>两端对齐的导航元素</h3>
        <ul class="nav nav-pills nav-justified">
                <li class="active"><a href="#">SVN</a></li>
                <li><a href="">www</a></li>
                <li><a href="">iso</a></li>
                <li><a href="">cng</a></li>
                <li><a href="">ccav</a></li>
            </ul><br>
            <ul class="nav nav-tabs ">
                    <li class="active"><a href="#">SVN</a></li>
                    <li><a href="">www</a></li>
                    <li><a href="">iso</a></li>
                    <li><a href="">cng</a></li>
                    <li><a href="">ccav</a></li>
                </ul><br>
</body>
</html>